<script type="text/javascript">
function fillCarID()
{
    var car_id = $('#car-selector').val();   
    $('#car_id_upload').val(car_id);
}

function fillTable()
{
    var car_id = $('#car-selector').val();

    $('#datatable').dataTable( {
        "bDestroy": true,
        "ajax": "<?php echo base_url() ?>administrator/car/load_gallery_list/" + car_id
    } );    
}

$(function(){   
    fillTable();
    fillCarID();
     $("#car-selector").change(function() {
        fillTable();
        fillCarID();
    });
});
</script>

<div class="col-md-12" id="content">
    <div class="alert alert-success save-notif hide">
        <strong>Success!</strong> New record has been added.
    </div>

    <div class="alert alert-info update-notif hide">
        <strong>Success!</strong> You have to change the data .
    </div>

    <div class="alert alert-warning delete-notif hide">
        <strong>Warning!</strong> The record has been deleted.
    </div>
    <!-- BEGIN Portlet PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-list"></i>List of Car Gallery
            </div>
            <div class="actions">
                <a class="btn btn-default btn-sm" href="#my-dropzone">
                <i class="fa fa-plus"></i> Add </a>
                <a class="btn btn-icon-only btn-default btn-sm fullscreen" href="javascript:;" data-original-title="" title="">
                </a>
            </div>
        </div>
        <div class="portlet-body">
        	<div class="row">
	            <div class="form-group">
	                <label class="col-md-2 control-label" style="margin-top:8px;"><b>Car Selector</b></label>
	                <div class="col-md-3">
	                    <select id="car-selector" class="form-control">
	                        <?php
	                            foreach ($query_car->result() as $row) 
	                            {
	                        ?>
	                            <option value="<?php echo $row->car_id ?>"><?php echo $row->series_name?></option>
	                        <?php
	                                
	                            }
	                        ?>
	                    </select>
	                </div>
	            </div>
	        </div>
	        <br>
	        <br>
            <table class="table table-striped table-hover table-bordered" id="datatable">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Cover Image</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Portlet PORTLET-->
</div>
<div class="portlet light">
    <div class="portlet-body">
        <div class="row">
            <div class="col-md-12">
                <p>
                <span class="label label-danger">
                NOTE: </span>
                &nbsp; This plugins works only on Latest Chrome, Firefox, Safari, Opera & Internet Explorer 10.

                <span style="float:right; margin-top:-10px;">
                	<a href="<?PHP echo base_url() ?>administrator/car/gallery" class="btn btn-success">Submit Upload</a>
                </span>
                </p>
                <form action="<?PHP echo base_url() ?>administrator/car/upload_gallery" class="dropzone" id="my-dropzone">
                	<div class="col-md-4">
                		Select Car
	                	<select name="car_id" class="form-control">
	                        <?php
	                            foreach ($query_car->result() as $row) 
	                            {
	                        ?>
	                            <option value="<?php echo $row->car_id ?>"><?php echo $row->series_name?></option>
	                        <?php
	                                
	                            }
	                        ?>
	                    </select>
                	</div>
                </form>
            </div>
        </div>
    </div>
</div>